<template>
	<modal :show="visible" custom padding="0" width="90%" radius="18rpx">
	<view class="header">
				<image src="/static/round_close_btn.png" @click="$emit('cancel')"></image>
			</view>
			<swiper :duration="1000" indicator-dots class="swiper" autoplay :interval="3000">
				<swiper-item v-for="(item, index) in productData.goods_image" :key="index" class="swiper-item">
					<image :src="item" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
			<scroll-view scroll-y class="content">
				<view class="wrapper">
					<view class="title">{{ productData.goods_name }}</view>
					<view style="margin: 20rpx;" v-if="productData.introduction">产品描述</view>
					<view style="margin: 20rpx;">{{ productData.introduction }}</view>
			   </view>
			   <view class="specs-box">
			   	<view class="specs-box-item" v-for="(item, index) of productData.goods_spec_format" :key="index">
			   		<view class="specs-box-item-title">
			   			{{ item.spec_name }}
			   		</view>
			   		<view class="specs-box-item-option">
			   			<view class="specs-box-item-option-block" v-for="(item1, index1) of item.value" :key="index1"
			   			 @click="handlerSpecs(item1,index1)"
			   			 :class="{'specs-box-item-option-active': item1.selected}">
			   				{{ item1.spec_value_name }}
			   			</view>
			   		</view>
			   	</view>
			   </view>
			   </scroll-view>
			<view class="bottom">
				<view class="price-and-materials">
					<view class="price">&yen;{{ productData.price || 0 }}</view>
					<actions :materialsFlag="true" @add="add" @minus="minus" :number="productData.currentNum"
					 v-if="btnTitle !== '加入购物袋' ">
						
					</actions>
				</view>
				<button type="primary" class="add-cart-btn" @click="addToCart">{{ btnTitle }}</button>
			</view>
	</modal>
</template>

<script>
	import Modal from '@/components/Modal/Modal.vue'
	import Actions from './actions.vue'
    import request from "@/api/request";
	export default {
		name: 'ProductModal',
		components: {
			Modal,
			Actions
		},
		props: {
			btnTitle: {
			  type: String,
			  default: '加入购物车'
			},
			cardGoods: { 
			  type: Array,
			  default: []
			},
			visible: {
				type: Boolean,
				default: false
			},
			product: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				currentIndex: 0,
				productData:null,
				specsData: [],
			}
		},
		watch: {
			product(val){
			  this.productData = val
			  this.specsData = []
			  // 当前规格数据
			  this.productData.goods_spec_format && this.productData.goods_spec_format.forEach(item => {
			     item.value.forEach(son => {
					if(son.selected){
					 this.specsData.push(son)
					}
				 })
			  })
			}
		},
		methods: {
			handlerSpecs(val,index) {
			  uni.showLoading({
			  	title: '加载中...'
			  })
			  // 将当前的规格类别过滤出来 给当前规格选中
			  const tempParent = this.productData.goods_spec_format.filter(item => item.spec_id === val.spec_id)
			  tempParent[0].value.forEach(item => {
				 if(item.sku_id === val.sku_id){
					item.selected = true
				 } else {
				  item.selected = false
				 }
			  })
			  
			    // 当前选中的规格类别数据specsData
			    const flagData = this.specsData.findIndex(item => item.spec_id === val.spec_id)
				this.specsData[flagData] = val
				const priceSKU_ID = this.specsData.findIndex(item => item.spec_name === '尺码')
		
				request({
				   url: '/kx/Shop/goodDetail',
				   method: 'POST',
				   data: {
					   sku_id: this.specsData[priceSKU_ID].sku_id
				   },
				   successCb: (res) => {
					 uni.hideLoading()
					 this.productData.price = res.data.price || '-'
					 this.productData.sku_id = res.data.sku_id
				   },
				   failCb: (err) => {
					 uni.hideLoading()
				   }
				})
			},
			add() {
				/*
				弹窗添加商品 当购买量超过最大购买时 提示弹窗
				且 最大购买量不等于零
				添加时 有最少购买量默认 为最少购买量
			    商品数量加1
				*/
				if(this.productData.currentNum >= this.productData.max_buy && this.productData.max_buy !== 0){
				  uni.$u.toast('超过最大购买量')
				  return
				}
				
				if (this.productData.currentNum < this.productData.min_buy) {
					this.productData.currentNum = this.productData.min_buy
				} else {
				  this.productData.currentNum += 1
				}
			},
			minus() {
				/*
				弹窗减少商品 当购买量小于等于 最少购买量时 赋值 为 0
				商品减1
				*/ 
				if(this.productData.currentNum <= this.productData.min_buy) {
					this.productData.currentNum = 0
				} else {
				 this.productData.currentNum -= 1	
				}
			},
			addToCart() {
				// 处理规格
				const goodsSpecs = []
			    if(this.productData.goods_spec_format){
				  this.productData.goods_spec_format.forEach(item => {
					 item.value.forEach(son => {
						if(son.selected){
							goodsSpecs.push(son.spec_value_name)
						}
					 })
				  })
				 this.productData.specsData = goodsSpecs
				}
				this.$emit('add-to-cart', this.productData)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		padding: 20rpx 30rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: flex-end;
		z-index: 11;

		image {
			width: 56rpx;
			height: 56rpx;
		}
	}

	.swiper {
		width: 100%;
		height: 426rpx;
		image {
		  width: 100%;
		  height: 100%; 
		  background-size: 100%  100%;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		font-size: $font-size-sm;
		color: $text-color-assist;
		.wrapper {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		.title {
			margin: 20rpx;
			font-size: $font-size-extra-lg;
			color: $text-color-base;
			font-weight: bold;
		}
	}

	.bottom {
		padding: 20rpx 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-top: 1rpx solid rgba($color: $border-color, $alpha: 0.3);
		background-color: $bg-color-white;
		position: relative;
		z-index: 11;

		.price-and-materials {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price {
				color: $color-primary;
				font-size: $font-size-extra-lg;
				font-weight: bold;
			}
		}

		.add-cart-btn {
			width: 100%;
			height: 100%;
			margin-top: 20rpx;
			font-size: $font-size-lg;
			border-radius: $border-radius-base;
			background: linear-gradient(90deg, #FF8732 0%, #FFB65E 100%);
		}
	}
	.specs-box {
		padding: 20rpx;
		&-item {
		  &-title {
			font-size: 28rpx;
			color: #999;
		  }
		  &-option {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			&-block {
				flex-shrink: 0;
			 width: 100rpx;
			 height: 50rpx;
			 border: 2rpx solid #999;
			 border-radius: 15rpx;
			 line-height: 50rpx;
			 text-align: center;
			 margin: 12rpx;
			}
			&-active {
			 border: 2rpx solid #DBA871;
			 color: #DBA871;
			}
		  }
		}
	}
</style>